<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YSL圣罗兰美妆官方网站 - 着我装者, 着我妆</title>
    <link rel="stylesheet" href="/css/head/login.css" />
    <link rel="stylesheet" href="/css/assets/reset.css" />
    <link rel="stylesheet" href="/css/assets/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/head/header.css" />
    <link rel="stylesheet" href="/css/foot/footer.css" />
    <link rel="stylesheet" href="/css/index/wrap.css" />
    <link rel="stylesheet" href="/css/assets/swiper-bundle.min.css" />
    <style type="text/css"></style>
  </head>

  <body>
    <!--头部内容(龙)-->
    <div id="header"></div>
    <!--主体内容(this)-->
    <!-- ----------------------------------------- -->
    <div class="index">
      <div class="swiper" id="swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="/images/index/ysl002.webp" />
          </div>
          <div class="swiper-slide">
            <img src="/images/index/ysl001.webp" />
          </div>
          <div class="swiper-slide">
            <img src="/images/index/ysl003.webp" />
          </div>
          <div class="swiper-slide">
            <img src="/images/index/ysl004.webp" />
          </div>
          <div class="swiper-slide">
            <img src="/images/index/ysl005.webp" />
          </div>
          <div class="swiper-slide">
            <img src="/images/index/ysl006.webp" />
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>

      <div class="img_groups">
        <div><img src="/images/index/ysl_sy01.webp" /></div>
        <div><img src="/images/index/ysl_sy1.webp" /></div>
        <div><img src="/images/index/ysl_sy2.webp" /></div>

        <div class="sy"><img src="/images/index/ysl_gd01.webp" /></div>

        <div><img src="/images/index/ysl_sy3.webp" /></div>
        <div><img src="/images/index/ysl_sy4.webp" /></div>
        <div><img src="/images/index/ysl_sy5.webp" /></div>
        <div><img src="/images/index/ysl_sy02.webp" /></div>
      </div>

      <!-- 第二部分轮播图 -->
      <div class="pp">
        <img src="/images/index/prev.png" class="sc prev" />
        <div class="swiper centerIndex" id="swiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="/images/index/ysl0010.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/index/ysl0020.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/index/ysl0030.webp" />
            </div>
          </div>
        </div>
        <img src="/images/index/next.png" class="sc next" />
      </div>

      <div><img src="/images/index/ysl0070.webp" alt="" /></div>
      <div><img src="/images/index/ysl_sy6.webp" alt="" /></div>
      <div><img src="/images/index/ysl_sy7.webp" alt="" /></div>
      <div><img src="/images/index/ysl_sy02.webp" /></div>

      <!-- 第三部分轮播图 -->
      <div class="pp">
        <img src="/images/index/prev.png" class="sc prev" />
        <div class="swiper centerIndex" id="swiper3">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="/images/index/ysl0040.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/index/ysl0050.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/index/ysl0060.webp" />
            </div>
          </div>
        </div>
        <img src="/images/index/next.png" class="sc next" />
      </div>

      <div><img src="/images/index/ysl_sy8.webp" alt="" /></div>
      <div><img src="/images/index/ysl_sy9.webp" alt="" /></div>
      <div><img src="/images/index/ysl_sy10.webp" alt="" /></div>
      <div><img src="/images/index/ysl_sy11.webp" alt="" /></div>
      <div><img src="/images/index/ysl_sy12.webp" alt="" /></div>
    </div>

    <!-- ----------------------------------------- -->
    <!--底体内容(龙)-->
    <div id="footer"></div>
  </body>
  <script src="/js/assets/jquery.js"></script>
  <script src="/js/assets/bootstrap.bundle.min.js"></script>
  <script src="/js/assets/swiper-bundle.min.js"></script>
  <script src="/js/head/header.js"></script>
  <script src="/js/head/footer.js"></script>
  <script src="/js/head/login.js"></script>
  <script>
    var Swiper1 = new Swiper("#swiper1", {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
      // 分页器
      pagination: {
        el: ".swiper-pagination",
      },
    });
    var Swiper2 = new Swiper("#swiper2", {
      // direction: 'vertical', // 垂直切换选项
      slidesPerView: 3,
      spaceBetween: 300,
      loop: true, // 循环模式选项
      autoHeight: true,
      autoplay: {
        delay: 2000,
      },

      // 前进后退按钮
      navigation: {
        nextEl: ".next",
        prevEl: ".prev",
      },
    });
    var Swiper3 = new Swiper("#swiper3", {
      // direction: 'vertical', // 垂直切换选项
      slidesPerView: 3,
      spaceBetween: 300,
      loop: true, // 循环模式选项
      autoplay: {
        delay: 2000,
      },

      // 前进后退按钮
      navigation: {
        nextEl: ".next",
        prevEl: ".prev",
      },
    });

    var currenttop = 0;
    $(window).scroll(() => {
      if ($(window).scrollTop() > 1600) {
        $(".sy").css("position", "fixed");
      } else {
        $(".sy").css("position", "");
      }
    });

    $(window).scroll(() => {
      if ($(window).scrollTop() > 300) {
        $(".header_topbanner").css("position", "relative");
      } else {
        $(".header_topbanner").css("position", "flxed");
      }
    });
  </script>
</html>
